import React, { useState } from 'react';
import { Card, Steps, Menu, Form, DatePicker, Input, Radio, Button, Row, Col, message } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Step } = Steps;
const { TextArea } = Input;

const menuItems = [
  '选课课程',
  '选课时间',
  '互斥设置',
  '连选设置',
  '禁选组',
  '选课权限',
  '限选人数',
];

export default function Time() {
  const navigate = useNavigate();
  const [currentMenu, setCurrentMenu] = useState('选课时间');
  const [form] = Form.useForm();

  const handleSave = async () => {
    try {
      await form.validateFields();
      message.success('保存成功！');
    } catch (e) {
      // 校验失败
    }
  };

  return (
    <div style={{ padding: 16, background: '#f5f6fa', minHeight: '100vh' }}>
      <Card style={{ borderRadius: 12, boxShadow: '0 2px 8px #f0f1f2' }}>
        <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 16 }}>选课设置 &gt; 创建选课</div>
        <Steps current={2} style={{ marginBottom: 32 }}>
          <Step title="基本信息" />
          <Step title="选课学生" />
          <Step title="选课设置" />
        </Steps>
        <Row gutter={24}>
          <Col flex="180px">
            <Menu
              mode="inline"
              selectedKeys={[currentMenu]}
              style={{ borderRadius: 8, background: '#f7f9fa', minHeight: 400 }}
              onClick={e => {
                setCurrentMenu(e.key);
                if (e.key === '选课课程' ) {
                  navigate('/xk/settings');
                } else if (e.key === '选课时间') {
                  navigate('/xk/time');
                }
              }}
            >
              {menuItems.map(item => (
                <Menu.Item key={item}>{item}</Menu.Item>
              ))}
            </Menu>
          </Col>
          <Col flex="auto">
            <div style={{ background: '#f7f9fa', borderRadius: 8, padding: 24, minHeight: 400 }}>
              {currentMenu === '选课时间' && (
                <Form
                  form={form}
                  layout="vertical"
                  style={{ maxWidth: 480 }}
                  initialValues={{ submitType: 'single' }}
                >
                  <Form.Item
                    label={<span style={{ fontWeight: 500 }}>选课时间</span>}
                    required
                    style={{ marginBottom: 24 }}
                  >
                    <Form.Item
                      name="startDate"
                      rules={[{ required: true, message: '请选择开始日期' }]}
                      noStyle
                    >
                      <DatePicker placeholder="开始日期" style={{ width: 150, marginRight: 16 }} />
                    </Form.Item>
                    <Form.Item
                      name="endDate"
                      rules={[{ required: true, message: '请选择结束日期' }]}
                      noStyle
                    >
                      <DatePicker placeholder="结束日期" style={{ width: 150 }} />
                    </Form.Item>
                  </Form.Item>
                  <Form.Item
                    label={<span style={{ fontWeight: 500 }}>选课说明</span>}
                    name="desc"
                    rules={[{ required: true, message: '请输入选课说明' }]}
                    style={{ marginBottom: 24 }}
                  >
                    <TextArea rows={4} placeholder="请输入选课说明" />
                  </Form.Item>
                  <Form.Item
                    label={<span style={{ fontWeight: 500 }}>选课设置</span>}
                    name="submitType"
                    style={{ marginBottom: 32 }}
                  >
                    <Radio.Group>
                      <Radio value="single">单次提交 <span style={{ color: '#888', fontWeight: 400 }}>(勾选后学生在选课时间内只能提交一次)</span></Radio>
                      <br />
                      <Radio value="repeat">重复提交 <span style={{ color: '#888', fontWeight: 400 }}>(勾选后学生在选课时间内可重复提交选课结果)</span></Radio>
                    </Radio.Group>
                  </Form.Item>
                  <Form.Item>
                    <Button type="primary" onClick={handleSave} style={{ width: 96 }}>保存</Button>
                  </Form.Item>
                </Form>
              )}
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  );
}
